<template>
	<view class="container">
		<text class="title">请选择单词分类</text>
		<view class="category-list">
			<view v-for="category in categories" :key="category.id" class="category-item" @click="goToWords(category.id)">
				<image :src="category.iconUrl" class="icon"></image>
				<text class="category-name">{{ category.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
	data() {
		return {
			categories: []
		};
	},
	onLoad() {
		this.fetchCategories();
	},
	methods: {
		fetchCategories() {
			uni.request({
				url: 'http://localhost:80/system/category/list',
				method: 'GET',
				success: (res) => {
					if (res.data) {
						this.categories = res.data;
					}
				}
			});
		},
		goToWords(categoryId) {
			uni.navigateTo({
				url: `/pages/work/words/words?categoryId=${categoryId}`
			});
		}
	}
};
</script>

<style>
.container {
	text-align: center;
	padding: 20px;
	background-color: #e3f2fd; /* 蓝色背景 */
	min-height: 100vh;
}

.title {
	font-size: 24px;
	font-weight: bold;
	color: #1e88e5; /* 深蓝色标题 */
	margin-bottom: 20px;
}

.category-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 20px;
}

.category-item {
	width: 180px;
	height: 180px;
	margin: 10px;
	background-color: #ffffff; /* 白色背景 */
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.category-item:hover {
	transform: scale(1.05);
}

.icon {
	width: 80px;
	height: 80px;
	margin-bottom: 10px;
}

.category-name {
	font-size: 18px;
	color: #333;
}
</style>
